<template>
  <DetailHeader />
  <div class="search_box">
    <div>参与人列表</div>
    <el-button @click="onExport" :disabled="tableData.length">导出</el-button>
  </div>
  <div class="table_box">
    <ZwTable ref="tableRef" class="table-box" :option="tableOption" :rowKey="getRowKey" :fetch-params="state.searchParams" :fetch-api="fetchApi()"></ZwTable>
  </div>
</template>

<script setup lang="tsx">
  import { reactive, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElMessage,ElImage, ElIcon, ElButton } from 'element-plus'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  import DetailHeader from '../components/DetailHeader.vue'
  import { getpartakeList, getExport } from '@/api/smartMarketing/redEnvelopes'
  import { deepCopy } from '@/utils/helper'
  import ZwTable from '@/components/zw/table/Table'

  const tableData = ref<any>([])
  const route = useRoute()
  const router = useRouter()
  const onColor = (status: number) => {
    switch (status) {
      case 1:
        return '#969696'
      case 2:
        return '#59d2a0'
      case 3:
        return '#ff6b00'
      case 4:
        return '#fe292b'
    }
  }
  const onExport = async () => {
    const res = await getExport({ activity_id: route.query.id })
    window.open(res.url)
    ElMessage.success('导出成功')
  }
  const tableOption = [
    {
      prop: 'title',
      label: '参与人',
      width: 100,
      render({ row, column, index }) {
        const slotError = () => (
          <div class="image_slot">
            <ElIcon>
              <IconPicture />
            </ElIcon>
          </div>
        )
        return (
          <div class="cusInfo">
            <ElImage preview-src-list={[row.cust_avatar]} preview-teleported={true} vSlots={{ error: slotError }} src={row.cust_avatar} fit="cover" class="avatar"></ElImage>
          </div>
        )
      }
    },
    {
      label: '引流员工',
      prop: 'user_name',
      render({row}) {
        return (
          <span>{row.user_name || '--'}</span>
        )
      }
    },
    {
      label: '添加时间',
      prop: 'created_at',
      render({row}) {
        return(
          <span>{row.created_at || '--'}</span>
        )
      }
    },
    {
      label: '红包金额',
      prop: 'red_amount',
      render({row}) {
        return (
          <span>¥{row.red_amount || '--'}元</span>
        )
      }
    },
    {
      label: '领取时间',
      prop: 'user_name',
      render({row}) {
        return (
          <span>{row.receive_time || '--'}</span>
        )
      }
    },
    {
      prop: 'operate',
      label: '操作',
      align: 'left',
      fixed: 'right',
      width: 120,
      isOperate: true,
      renderOperate({row}) {
        return (
          <ElButton size="small" onClick={() => router.push(`/customer/manage/list/detail?id=${row.cust_id}`)}>客户详情</ElButton>
        )
      }
    }
  ]
  const getRowKey = (row: any) => {
    return row.id
  }
  const defaultParams = reactive({
    activity_id: route.query.id,
  })
  const state = reactive({
    searchParams: deepCopy({...defaultParams, activity_id: route.query.id,})
  })
  const fetchApi = () => {
    // 获取文件列表
    return getpartakeList
  }
</script>

<style lang="scss" scoped>
  .header_box {
    display: flex;
    justify-content: space-between;
    padding: 20px 26px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px rgba(240, 240, 240, 0.5);
    border: 1px solid #eaeaea;
    font-size: 14px;
    color: #33302d;
  }
  .search_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0 0;
    padding: 10px 20px 10px 20px;
    background: #ffffff;
    font-size: 14px;
    border: 1px solid #EAEAEA;
    border: 1px solid #EAEAEA;
    color: #33302d;
    .zw-table-search {
      // margin-bottom: 16px;
      background-color: #fff;
    }
  }
  .table_box {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #EAEAEA;
    border-top: none;
  }
  .none_data {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #909399;
    img {
      padding-top: 30px;
      transform: translateX(15%);
    }
  }
  :deep(.avatar) {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 36px;
  }
</style>
